<template>
  <div class="container">
    <div class="search">
      <input type="text" v-model="search">
      <el-button type="primary" icon="el-icon-search" @click="searchUser">搜索</el-button>
    </div>
    <table class="user">
      <thead class="head">
        <tr>
          <th>用户名</th>
          <th>性别</th>
          <th>工资</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody class="body" v-show="show">
        <tr v-for="item in user" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.gander == 0 ? "女" : "男" }}</td>
          <td>{{ item.salary }}</td>
          <td>
            <el-button size="mini" type="primary" @click="insertData(item.id)">添加</el-button>
            <el-button size="mini" type="warning" @click="upData(item.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="delData(item.id)">删除</el-button>
          </td>
        </tr>
      </tbody>
      <tbody class="body" v-show="searcshow">
        <tr v-for="item in usersearch" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.gander == 0 ? "女" : "男" }}</td>
          <td>{{ item.salary }}</td>
          <td>
            <el-button size="mini" type="primary" @click="insertData(item.id)">添加</el-button>
            <el-button size="mini" type="warning" @click="upData(item.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="delData(item.id)">删除</el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { reqUserinfo, reqDeldata , reqSearch} from "../api/index";
export default {
  data() {
    return {
      user: [],
      show:true,
      searcshow:false,
      search:'',
      usersearch:[]
    };
  },
  mounted() {
    this.getUserinfo();
  },
  methods: {
    async getUserinfo() {
      const { code, data } = await reqUserinfo();
      if (code == 200) {
        this.user = data;
      }
    },
    insertData(id) {
      this.$router.push(`/updata/${id}`);
    },
    upData(id) {
      this.$router.push(`/updata/${id}`);
    },
    async delData(id) {
      const { code, msg } = await reqDeldata(id);
      if (code == 200) {
        this.$alert(msg, {
          confirmButtonText: "确定一下",
          callback: (confirm) => {
            location.reload()
          },
        });
      }
    },
    async searchUser(){
      const {code,msg,data} = await reqSearch(this.search)
      if(code==200){
        this.$alert(msg, {
          confirmButtonText: "确定一下",
          callback: (confirm) => {
            this.usersearch=data
            this.show=false
            this.searcshow=true
          },
        });
      }
      else{
        this.$alert(msg, {
          confirmButtonText: "确定一下",
          callback: (confirm) => {
            location.reload()
          },
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 95%;
  text-align: center;
  .search{
    width: 50%;
    margin:20px auto;
    input{
      width: 70%;
      padding: 10px;
    }
  }
  .user {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    border: 1px solid black;
    border-collapse: collapse;
    .head {
      tr {
        height: 50px;
        th {
          border: 1px solid red;
        }
      }
    }
    .body {
      tr {
        height: 50px;
        td {
          border: 1px solid black;
        }
      }
    }
  }
}
</style>
